import "./index.scss";
import { constantRoutes } from "@/router";
import { isHttp } from "@/utils/validate";
import useAppStore from "@/store/modules/app";
import useSettingsStore from "@/store/modules/settings";
import usePermissionStore from "@/store/modules/permission";
import { RouteOption } from "vue-router";
import SvgIcon from "@/components/SvgIcon/index";
export default defineComponent({
  props: {
    id: {
      type: String,
      default: "",
    },
    class: {
      type: String,
      default: "",
    },
  },
  setup(props, tsx) {
    // 顶部栏初始数
    const visibleNumber = ref<number>(-1);
    // 当前激活菜单的 index
    const currentIndex = ref<string>();
    // 隐藏侧边栏路由
    const hideList = ["/index", "/user/profile"];

    const appStore = useAppStore();
    const settingsStore = useSettingsStore();
    const permissionStore = usePermissionStore();
    const route = useRoute();
    const router = useRouter();

    // 主题颜色
    const theme = computed(() => settingsStore.theme);
    // 所有的路由信息
    const routers = computed(() => permissionStore.topbarRouters);

    // 顶部显示菜单
    const topMenus = computed(() => {
      let topMenus: RouteOption[] = [];
      routers.value.map((menu) => {
        if (menu.hidden !== true) {
          // 兼容顶部栏一级菜单内部跳转
          if (menu.path === "/") {
            topMenus.push(menu.children ? menu.children[0] : menu);
          } else {
            topMenus.push(menu);
          }
        }
      });
      return topMenus;
    });

    // 设置子路由
    const childrenMenus = computed(() => {
      let childrenMenus: RouteOption[] = [];
      routers.value.map((router) => {
        router.children?.forEach((item) => {
          if (item.parentPath === undefined) {
            if (router.path === "/") {
              item.path = "/" + item.path;
            } else {
              if (!isHttp(item.path)) {
                item.path = router.path + "/" + item.path;
              }
            }
            item.parentPath = router.path;
          }
          childrenMenus.push(item);
        });
      });
      return constantRoutes.concat(childrenMenus);
    });

    // 默认激活的菜单
    const activeMenu = computed(() => {
      const path = route.path;
      let activePath = path;
      if (
        path !== undefined &&
        path.lastIndexOf("/") > 0 &&
        hideList.indexOf(path) === -1
      ) {
        const tmpPath = path.substring(1, path.length);
        activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
        if (!route.meta.link) {
          appStore.toggleSideBarHide(false);
        }
      } else if (!route.children) {
        activePath = path;
        appStore.toggleSideBarHide(true);
      }
      activeRoutes(activePath);
      return activePath;
    });

    const setVisibleNumber = () => {
      const width = document.body.getBoundingClientRect().width / 3;
      visibleNumber.value = parseInt(String(width / 85));
    };

    const handleSelect = (key: string) => {
      currentIndex.value = key;
      const route = routers.value.find((item) => item.path === key);
      if (isHttp(key)) {
        // http(s):// 路径新窗口打开
        window.open(key, "_blank");
      } else if (!route || !route.children) {
        // 没有子路由路径内部打开
        const routeMenu = childrenMenus.value.find((item) => item.path === key);
        if (routeMenu && routeMenu.query) {
          let query = JSON.parse(routeMenu.query);
          router.push({ path: key, query: query });
        } else {
          router.push({ path: key });
        }
        appStore.toggleSideBarHide(true);
      } else {
        // 显示左侧联动菜单
        activeRoutes(key);
        appStore.toggleSideBarHide(false);
      }
    };

    const activeRoutes = (key: string) => {
      let routes: RouteOption[] = [];
      if (childrenMenus.value && childrenMenus.value.length > 0) {
        childrenMenus.value.map((item) => {
          if (key == item.parentPath || (key == "index" && "" == item.path)) {
            routes.push(item);
          }
        });
      }
      if (routes.length > 0) {
        permissionStore.setSidebarRouters(routes);
      } else {
        appStore.toggleSideBarHide(true);
      }
      return routes;
    };

    onMounted(() => {
      window.addEventListener("resize", setVisibleNumber);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", setVisibleNumber);
    });

    onMounted(() => {
      setVisibleNumber();
    });
    return () => (
      <el-menu
        default-active={activeMenu.value}
        mode="horizontal"
        onSelect={handleSelect}
        ellipsis={false}
        id={props.id}
        class={props.class}
      >
        {topMenus.value.map((item, index) =>
          index < visibleNumber.value ? (
            <el-menu-item
              style={{ "--theme": theme.value }}
              index={item.path}
              key={index}
            >
              <SvgIcon iconClass={item.meta ? item.meta.icon : ""} />
              {item.meta?.title}
            </el-menu-item>
          ) : null
        )}

        {/* 顶部菜单超出数量折叠 */}
        {topMenus.value.length > visibleNumber.value ? (
          <el-sub-menu style={{ "--theme": theme.value }} index="more">
            {{
              title: () => "更多菜单",
              default: () =>
                topMenus.value.map((item, index) =>
                  index >= visibleNumber.value ? (
                    <el-menu-item
                      style={{ "--theme": theme.value }}
                      index={item.path}
                      key={index}
                    >
                      <SvgIcon iconClass={item.meta ? item.meta.icon : ""} />
                      {item.meta?.title}
                    </el-menu-item>
                  ) : null
                ),
            }}
          </el-sub-menu>
        ) : null}
      </el-menu>
    );
  },
});
